<script setup lang="ts">
import catalogueForm from "./catalogueForm.vue";
import selectPageForm from "./selectPageForm.vue";
import { addDialog } from "@/components/ReDialog";
import { message } from "@/utils/message";
import { ref, h } from "vue";
import type { FormItemProps, selectPageFormItemProps } from "./utils/types";
import { deviceDetection } from "@pureadmin/utils";

import { FolderOpened, DocumentCopy } from "@element-plus/icons-vue";
import router from "@/router";

const dialog = ref(false);

const emit = defineEmits(["catalogue", "page"]);

// 目录表单
const catalogueFormRef = ref();
function addCatalogueClick(title = "新增", row?: FormItemProps) {
  addDialog({
    title: `${title}目录`,
    props: {
      formInline: {
        path: row?.path ?? "",
        title: row?.title ?? "",
        icon: row?.icon ?? "",
      }
    },
    width: "440px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(catalogueForm, { ref: catalogueFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = catalogueFormRef.value.getRef();
      const curData = options.props.formInline as FormItemProps;
      FormRef.validate(valid => {
        if (valid) {
          emit('catalogue', curData)
          done() // 关闭弹窗
          dialog.value = false // 关闭本页面弹窗
        }
      });
    }
  });
}

// 页面表单
const selectPageFormRef = ref();
function addPageClick() {
  addDialog({
    title: '选择页面',
    props: {
      formInline: {
        router: null,
        path: ""
      }
    },
    width: "600px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(selectPageForm, { ref: selectPageFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const curData = options.props.formInline as selectPageFormItemProps;
      if (!curData.router) return message("页面为必选项", { type: "error" });
      emit('page', curData)
      done() // 关闭弹窗
      dialog.value = false // 关闭本页面弹窗
    }
  });
}

const pageType = ref(1) // 1 添加、 2 其下新增
// 打开弹窗
function openDialog(row) {
  if (row) pageType.value = 2
  else pageType.value = 1
  dialog.value = true;
}

defineExpose({ openDialog });
</script>

<template>
  <div>
    <el-dialog v-model="dialog" title="选择新增类型" width="440">
      <div class="word">
        <div class="cell-item" v-if="pageType == 1" @click="addCatalogueClick()">
          <el-icon :size="18"><FolderOpened /></el-icon>
          <p>目录</p>
        </div>
        <div class="cell-item" @click="addPageClick()">
          <el-icon :size="18"><DocumentCopy /></el-icon>
          <p>页面</p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.word {
  width: 100%;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0 24px;

  .cell-item {
    height: 54px;
    background-color: #eaeaea;
    border-radius: 10px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    p {
      font-size: 17px;
      margin-left: 10px;
    }
  }
}

.dialog-footer {
  margin-top: 16px;
}
</style>
